<template>
	<view class="long-width-height-form-item-compontent">
		<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
		<view class="input-row">
			<view class="input-view">
				<input v-model="innerLong" class="my-input" type="digit" :placeholder="longPlaceholder" />
			</view>
			<view class="divider-text">*</view>
			<view class="input-view">
				<input v-model="innerWidth" class="my-input" type="digit" :placeholder="widthPlaceholder" />
			</view>
			<view class="divider-text">*</view>
			<view class="input-view">
				<input v-model="innerHeight" class="my-input" type="digit" :placeholder="heightPlaceholder" />
			</view>
		</view>
		<view class="msg-row" v-if="msg">{{msg}}</view>
	</view>
</template>

<script>
export default {
	name:'LongWidthHeightFormItemComponent',
	emits:['update:long','update:width','update:height'],
	props:{
		long:{
			type:[Number,String],
			default:0
		},
		width:{
			type:[Number,String],
			default:0
		},
		height:{
			type:[Number,String],
			default:0
		},
		label:{
			type:String,
			default:'长宽高'
		},
		longPlaceholder:{
			type:String,
			default:'长'
		},
		widthPlaceholder:{
			type:String,
			default:'宽'
		},
		heightPlaceholder:{
			type:String,
			default:'高'
		},
		msg:{
			type:String,
			default:''
		},
		required:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			innerLong:0,
			innerWidth:0,
			innerHeight:0
		}
	},
	watch:{
		long(newVal,oldVal){
			if (newVal!==this.innerValue) {
				this.innerLong = newVal
			}
		},
		innerLong(newVal,oldVal){
			if (newVal!==this.value) {
				this.$emit('update:long',newVal)
			}
		},
		width(newVal,oldVal){
			if (newVal!==this.innerValue) {
				this.innerWidth = newVal
			}
		},
		innerWidth(newVal,oldVal){
			if (newVal!==this.value) {
				this.$emit('update:width',newVal)
			}
		},
		height(newVal,oldVal){
			if (newVal!==this.innerValue) {
				this.innerHeight = newVal
			}
		},
		innerHeight(newVal,oldVal){
			if (newVal!==this.value) {
				this.$emit('update:height',newVal)
			}
		}
	},
	created() {
		this.innerLong = this.long
		this.innerWidth = this.width
		this.innerHeight = this.height
	}
}
</script>

<style scoped lang="scss">
.long-width-height-form-item-compontent{
	width: 100%;
	.p-form-label{
		font-size: 32rpx;
		color: $u-tips-color;
		padding-bottom: 12rpx;
		padding-left: 20rpx;
		.required-tag{
			color:#ff0000;
		}
	}
	.input-row{
		width: 100%;
		height: 90rpx;
		overflow: hidden;
		background-color: $uni-bg-color;
		display: flex;
		align-items: center;
		.input-view{
			flex-grow: 1;
			width: 1px;
		}
		.divider-text{
			flex-shrink: 0;
			font-size: 1.5em;
			height: 100%;
			background-color: transparent;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			
		}
	}
	.msg-row{
		padding: 6rpx 20rpx 0 20rpx;
		line-height: 1.3;
		font-size: 24rpx;
		color: $u-error;
	}
	.my-input{
		text-align: center;
	}
}
</style>